<template>
  <view>
    <cu-custom :bgColor="NavBarColor" :isBack="true" backRouterName="index">
      <block slot="backText">返回</block>
      <block slot="content">升级记录</block>
    </cu-custom>
  
<!--    <view class="cu-bar bg-white search fixed" :style="[{top:CustomBar + 'px'}]">
      <view class="search-form round">
        <text class="cuIcon-search"></text>
        <input type="text" v-model="keyword" placeholder="输入申请单ID" confirm-type="search"
               @confirm="searchUserByKey"></input>
      </view>
      <view class="action">
        <button class="cu-btn bg-gradual-red shadow-blur round" @tap="searchUserByKey">搜索</button>
      </view>
    </view> -->
	<view>
	  <uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="button"
	                         activeColor="#ff3333"></uni-segmented-control>
	</view>
	<uni-search-bar @confirm="search" :focus="true" v-model="keyword" @blur="load" @focus="load" @input="load"
					@cancel="load" @clear="load">
				</uni-search-bar>
	<view v-show="user.vipDJ==0&& list.length==0" style="display: flex; flex-direction: column; align-items: center; margin-top: 100px;">
	  <image src="../../static/no_team.png" mode="" style="width: 100px; height: 100px;"></image>
	   <text style="margin-top: 10px; font-size: 16px; color: #999;">您还不是会员</text>
	<button class="cu-btn margin-lg bg-gradual-red shadow-blur"  @tap="goPage()">去升级</button> 
	</view> 
    <view style="margin-top: 5px;" v-for="item in list" :key="item.id">
      <uni-card title="申请升级:会员" :extra="`金额: ${item.money}元`" :isFull="true">
        <uni-row class="demo-uni-row">
          <uni-col :span="18">
            <text class="uni-body">会员姓名：{{item.checkName}}</text>
          </uni-col>
          <uni-col :span="6"  class="margin-bottom-sm" >
            <button v-show="item.isUstate==1" class="bg-gradual-green shadow-blur" :disabled="true">已加好友</button>
            <button v-show="item.isUstate==0" class="cu-btn bg-gradual-green shadow-blur"
                    @tap="dialogToggle('success',item.id)">未加好友
            </button>
          </uni-col>
          <uni-col :span="16" class="margin-bottom-sm" >
			<view class="container">
			 	<view class="phone">联系电话：{{ item.checkPhone }}</view> 
							<view  class="bg-gradual-green shadow-blur" 
							        @tap="handleCall(item.checkPhone)">一键拨号</view>
							</view>
			  
          </uni-col>
          <uni-col :span="8"  class="margin-bottom-sm"> 
			<button class="cu-btn bg-gradual-pink shadow-blur"   v-show="item.moneyImg!=null && item.moneyImg!='null'" v-if="item.auditState==0" >倒计时:{{item.countdown}}</button>
           <button class="cu-btn bg-gradual-pink shadow-blur" @tap="uploadFile(item)" v-show="item.moneyImg==null">上传付款记录</button>
          </uni-col>
          <uni-col :span="18"> 
				<view class="container">
				 	<view class="phone">微信/支付宝：{{ item.checkWz }}</view> 
								<view  class="bg-gradual-green shadow-blur" 
								        @tap="copy(item.checkWz)">一键复制</view>
								</view>
          </uni-col>
		  <uni-col :span="6">
			  <button class="cu-btn bg-gradual-red shadow-blur" v-show="item.auditState==0">审核中</button>
			   <button class="cu-btn bg-gradual-red shadow-blur" v-show="item.auditState==1">已审核</button>
		  </uni-col>
        </uni-row>
        <uni-collapse ref="collapse">
          <uni-collapse-item title="收款码" :open="false" >
            <view>
              <image :src="item.moneyCode" mode="heightFix"></image>
            </view>
          </uni-collapse-item>
		  <uni-collapse-item title="付款记录" :open="false" >
		    <view>
		      <image :src="item.moneyImg" mode="heightFix"></image>
		    </view>
		  </uni-collapse-item>
		  
        </uni-collapse>
      </uni-card>
    </view>
    <view>
      <!-- 提示窗示例 -->
      <uni-popup ref="alertDialog" type="dialog">
        <uni-popup-dialog :type="msgType" cancelText="取消" confirmText="确认" title="确认添加好友" @confirm="addUser"
                          @close="dialogClose"></uni-popup-dialog>
      </uni-popup>
    </view>
  </view> 
</template>

<script>
import api from '@/api/api'

export default {
  data() {
    return {
		uploadUrl:"/sys/common/upload",
      items: ['正在申请', '历史记录'],
      current: 0,
      id: '',
      StatusBar: this.StatusBar,
      CustomBar: this.CustomBar,
      keyword: '',
      userId: '',
	  user:{},
      list: [],
      //审核状态(0未审核，1已审核)
      auditState: 0,
      msgType: ''
    }
  },
  watch: {
    cur: {
      immediate: true,
      handler() {
        // console.log('watch', this.cur)
        this.userId = this.$store.getters.userid
        this.load()
      }
    }
  },
 mounted() {
	 const timer = setInterval(() => {
	    this.load()
	 }, 10000)
			this.usertongji()
			this.startCountdown()
		},
  onLoad() {
  },
  methods: { 
	   startCountdown() {
	     const timer = setInterval(() => {
	       const now = new Date().getTime();
	       this.list.forEach(item => {
	         let paymentTime = new Date(item.moneyPayTime).getTime(); // 替换为实际的 paymentTime
	         paymentTime += 10 * 60 * 1000; // 将 paymentTime 加上十分钟
	         let remainingTime = paymentTime - now;
	         // console.log(remainingTime);
	         if (remainingTime <= 10 * 60 * 1000 && remainingTime>=0) {
	           const minutes = Math.floor(remainingTime / (1000 * 60));
	           const seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);
	           item.countdown = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
	           item.countdown.replace('-', '');
	           this.$forceUpdate();
	         } else {
	           // this.load();
	         }
	       });
	     }, 1000);
	   },

	      handleCall(value) {
	        uni.makePhoneCall({
	          phoneNumber: value,
	          success() {
	            console.log('拨号成功')
	          },
	          fail() {
	            console.log('拨号失败')
	          }
	        })
	      },
	  copy(value){
		console.log('88888'+value)
	    // 复制
	    uni.setClipboardData({
	      data: value,// 复制的内容
	      success: function () {
	        console.log('success');
	        uni.showToast({
	          title:'复制成功',
	          duration:2000
	        })
	      }
	    });
	  
	  },
    searchUserByKey() {
      this.load()
    },
	goPage(page){
	this.$Router.push({name: 'uplevel'})
	},
	 uploadFile(item) {
	    uni.chooseImage({
	    	count: 4, //默认9
	    	sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
	    	sourceType: ['album'], //从相册选择
	    	success: (res) => {
	    		this.$http.upload(this.$config.apiUrl+this.uploadUrl, {
	    				filePath: res.tempFilePaths[0],
	    				name: 'file'
	    			})
	    			.then(res => { 
						api.fkjl(item.id,res.data.message).then(response => {
								      if(response.data.code ==200){   
										  this.load()
									    this.$tip.success('上传成功');  
								      }else{ 
										let msg = response.data.message || "请求超时"
										this.$tip.alert(msg);  
								      }
						  }).catch(error => { 
							this.$tip.alert("请求超时");
							this.isDisabled = true 
						})
	    			})
	    			.catch(err => {
	    				this.$tip.error(err.data.message)
	    			}); 
	    	}
	    });
	    },
	usertongji(){
		api.usertongji( this.userId).then(response => {
				      if(response.data.code ==200){   
						  this.user = response.data.result  
						  let avatar=(response.data.result.avatar && response.data.result.avatar.length > 0)? api.getFileAccessHttpUrl(response.data.result.avatar):'/static/avatar_boy.png'
						  this.user.avatar =avatar
				      }else{ 
						let msg = response.data.message || "请求超时"
						this.$tip.alert(msg);  
				      }
		  }).catch(error => { 
			this.$tip.alert("请求超时");
			
			this.isDisabled = true 
		})
	},
    dialogToggle(type, id) {
      this.id = id
      this.msgType = type
      this.$refs.alertDialog.open()
    },
    dialogClose() {
      this.id = ''
      this.$refs.alertDialog.close()
    },
    addUser() {
      api.jiahaoyou(this.id).then(response => {
        if (response.data.code == 200) {
          this.$tip.alert('添加成功！')
          this.load()
          this.id = ''
          this.$refs.alertDialog.close()
        } else {
          let msg = response.data.message || '请求超时'
          this.$tip.alert(msg)
        }
      }).catch(error => {
        this.$tip.alert('请求超时')

        this.isDisabled = true
      })
    },

    load() {
      api.sqjl(this.auditState, this.userId, this.keyword).then(response => {
        if (response.data.code == 200) {
          this.list = response.data.result
		  
		  for (let i in this.list) {
		     this.list[i].moneyCode=this.list[i].moneyCode
			 if(this.list[i].moneyImg!=null){
				 
				  this.list[i].moneyImg= api.getFileAccessHttpUrl(this.list[i].moneyImg)
			 }
		   }

		  
		  let avatar=(response.data.result.avatar && response.data.result.avatar.length > 0)? api.getFileAccessHttpUrl(response.data.result.avatar):'/static/avatar_boy.png'
		  this.user.avatar =avatar
		  
        } else {
          let msg = response.data.message || '请求超时'
          this.$tip.alert(msg)
        }
      }).catch(error => {
        this.$tip.alert('请求超时')

        this.isDisabled = true
      })
    },
    onClickItem(e) {
      if (this.current != e.currentIndex) {
        this.current = e.currentIndex
        this.auditState = e.currentIndex
        this.load()
      }
    },
    backTap() {
      this.$Router.replace({ name: 'index' })
    }


  }
}
</script>

<style>
page {
  padding-top: 100 upx;
}
.container {
  display: flex;
  align-items: center;
}
.mpx {
  margin-bottom: 20px; /* 设置下边距为20像素 */
}

.indexes {
  position: relative;
}
.phone {
  margin-right: 10px;
}

.copy-btn {
  padding: 5px 10px;
  background-color: #eee;
  color: #333;
  border-radius: 4px;
}
.indexBar {
  position: fixed;
  right: 0px;
  bottom: 0px;
  padding: 20 upx 20 upx 20 upx 60 upx;
  display: flex;
  align-items: center;
}

.indexBar .indexBar-box {
  width: 40 upx;
  height: auto;
  background: #fff;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 20 upx rgba(0, 0, 0, 0.1);
  border-radius: 10 upx;
}

.indexBar-item {
  flex: 1;
  width: 40 upx;
  height: 40 upx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24 upx;
  color: #888;
}

movable-view.indexBar-item {
  width: 40 upx;
  height: 40 upx;
  z-index: 9;
  position: relative;
}

movable-view.indexBar-item::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 10 upx;
  height: 20 upx;
  width: 4 upx;
  background-color: #f37b1d;
}

.indexToast {
  position: fixed;
  top: 0;
  right: 80 upx;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  width: 100 upx;
  height: 100 upx;
  border-radius: 10 upx;
  margin: auto;
  color: #fff;
  line-height: 100 upx;
  text-align: center;
  font-size: 48 upx;
}
</style>
